import { TransitionGroup, CSSTransition } from 'react-transition-group';
import {
  BrowserRouter,
  Redirect,
  Route,
  Switch,
  withRouter,
} from 'react-router-dom';
import Home from '../pages/Home';
import Catalog from '../pages/Catalog';
import { Layout } from './Layout';

const RoutesWithTransition = withRouter(({ location }) => {
  return (
    <TransitionGroup className={'router-wrapper'}>
      <CSSTransition timeout={5000} classNames={'fade'} key={location.pathname}>
        <Switch location={location}>
          <Route path="/home" component={Home} />
          <Route path="/catalog" component={Catalog} />
          <Redirect to="/home" />
        </Switch>
      </CSSTransition>
    </TransitionGroup>
  );
});

export const Routes = () => {
  return (
    <BrowserRouter>
      <Layout>
        <RoutesWithTransition />
      </Layout>
    </BrowserRouter>
  );
};
